<template>
  <el-row :gutter="20">
    <el-col v-for="(item, index) in iconList.slice(0, 8)" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
      <el-card class="icon-panel" shadow="hover" @click="handleLink(item.name)">
        <el-icon :color="item.color" class="no-inherit">
          <Share />
        </el-icon>
        <p>{{ item.menuNodeName }}</p>
      </el-card>
    </el-col>
  </el-row>
</template>

<script>
import { useRouter } from "vue-router";
import http from "@/api";
import _ from "lodash";

export default defineComponent({
  setup() {
    const router = useRouter();

    // 卡片图标
    const state = reactive({
      url: "menuClickRecord/curUser",
      iconList: []
    });

    const fetchData = async () => {
      state.listLoading = true;
      const res = await http.get(state.url);
      if (res.code == 200) {
        state.loading = false;
        state.iconList = res.datas.map(item => {
          const iconlis = {
            name: item.menuName,
            path: item.path,
            icon: item.icon,
            color: randomHexColor(),
            menuNodeName: item.menuNodeName
          };
          return iconlis;
        });
        state.listLoading = false;
      }
    };

    const randomHexColor = () => {
      return _.shuffle(["#95de64", "#69c0ff", "#ffd666", "#1890FF", "#ffc069", "#5cdbd3", "#b37feb", "#ff85c0"]);
    };

    const handleLink = name => {
      router.push({
        name: name
      });
    };

    onMounted(() => {
      fetchData();
    });

    return {
      ...toRefs(state),
      fetchData,
      handleLink
    };
  }
});
</script>

<style lang="scss" scoped>
.icon-panel {
  margin-bottom: 20px;
  text-align: center;
  cursor: pointer;
  .el-card__body {
    height: 120px;
    &:hover {
      i {
        transform: scale(1.15);
      }
    }
    i {
      display: block;
      width: 50px;
      height: 50px;
      margin: auto;
      font-size: 40px;
      transition: all ease-in-out 0.3s;
    }
    p {
      margin-top: 10px;
      text-align: center;
    }
  }
}
</style>
